<template>
	<view class="wrap">
		<u-navbar :title="params.type == 1 ? '种植成功': '守护成功'" :background="{backgroundColor: '#fff'}" :custom-back="close" :title-color="'#000'"
		 :back-icon-color="'#000'" :back-text-style="{color: '#000'}">
		</u-navbar>
		<view>
			<view class="u-m-t-80 u-m-b-40" >
				<u-image style="margin: 0 auto;" src="/static/img/loveforest/success.png" width="150" height="150" mode="aspectFit"></u-image>
			</view>
			<view class="tree u-text-center u-m-b-30 u-m-t-30" v-if="params.type == 1">
				您已成功提交种植{{params.name}} 1棵
			</view>
			<view class="tree u-text-center u-m-b-30 u-m-t-30" v-else>
				您已成功提交守护 {{params.name}} 1棵
			</view>
			<view class="u-text-center text u-m-b-30 ">
				消耗能量：{{params.energy}}g
			</view>
			<view class="btn">
				<u-button @click="checkTree" style="background:#488EF5" shape="circle" type="primary">
						<span v-if="params.type == 1 ">查看种植证书</span>
						<span v-else>查看守护证书</span>
				</u-button>
			</view>
			<view class="u-text-center person u-m-t-30" @click="back">
				返回个人园林
			</view>
		</view>
		<view v-if="result.length>0">
			<certificate :show="show" :result="result" @close="hide"></certificate>
		</view>
		
	</view>
</template>

<script>
	import certificate from "../../components/certificate.vue"
	export default {
		components:{certificate},
		data () {
			return {
				params: {},
				show: false,
				result: []
			}
		},
		onLoad (option) {
			console.log(option)
			this.params = option
		},
		methods: {
			close () {
				uni.navigateBack()
			},
			hide () {
				this.show = false
			},
			checkTree () {
				
				if(this.params.type == 1) {
					this.$u.api.forestMedal({id:this.params.id}).then(res => {
						this.show = true
						res.type = 1
						this.result = [res]
					}).catch(res => {
						this.$u.toast(res.msg)
					})
				}else{
					this.$u.api.guardCertificate({id:this.params.id}).then(res => {
						res.type = 2
						this.show = true
						this.result = [res]
					}).catch(res => {
						this.$u.toast(res.msg)
					})
				}
			},
			back () {
				this.$u.route('pages/work/apply/loveforest/personal_garden/personal_garden')
			},
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		height: 100%;
		background: #fff;
	}
	.wrap{
		height: 100%;
		padding: 0 30px;
		.btn {
			margin-top: 260px;
		}
		.tree {
			font-weight: 600;
			color: #333333;
			font-size: 30rpx;
		}
		.text {
			font-weight: 400;
			color: #999999;
			font-size: 26rpx;
		}
		.person {
			font-size: 28rpx;
			font-weight: 400;
			color: #488EF5;
		}
	}
	/deep/ .certificate_pop {
		.u-mode-center-box {
			background: transparent!important;
			
		}
		// .iconClose{
		// 	top: 120px!important;
		// }
	}
</style>
